<template>
  <div class="register-container">
    <el-input v-model="searchText" placeholder="搜索" size="normal" clearable @change="change"></el-input>
    <el-tabs v-model="activeTab" type="border-card" style="height: calc(100% - 2rem);">
      <el-tab-pane label="待就诊" name="first">
        <div class="register-content">
          <el-table ref="firstTable" :data="registerListA" :show-header="false" border stripe @row-dblclick="handleRowDblclick" :max-height="tableHeight">
            <el-table-column width="0">
              <template slot-scope="scope">
                <div class="register-item">
                  <el-tooltip class="item" effect="light" :content="`门诊号：${scope.row.patient_id}`" placement="right">
                    <div class="name">{{ scope.row.patient_name }}</div>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已就诊" name="second">
        <div class="register-content">
          <el-table ref="secondTable" :data="registerListC" :show-header="false" border stripe @row-dblclick="handleRowDblclick" :max-height="tableHeight">
            <el-table-column width="0">
              <template slot-scope="scope">
                <div class="register-item">
                  <el-tooltip class="item" effect="light" :content="`门诊号：${scope.row.patient_id}`" placement="right">
                    <div class="name">{{ scope.row.patient_name }}</div>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getRegisterList, setRegister } from '@/api/register'
export default {
  name: 'Register',
  data() {
    return {
      searchText: '',
      activeTab: 'first',
      registerList: [],
      registerListC: [],
      registerListA: [],
      tableHeight: 300
    }
  },
  mounted() {
    this.getList()
    // 设置表格高度（自适应）
    this.calcTableHeight()
    window.addEventListener('resize', () => {
      this.calcTableHeight()
    })
    // 触发一次resize事件
    const myEvent = new Event('resize')
    window.dispatchEvent(myEvent)

  },
  methods: {
    getList() {
      getRegisterList().then(res => {
        this.registerList = res.data.dataList
        this.change()
      })
    },
    change() {
      if (this.searchText === '') { // 恢复默认列表
        this.registerListC = this.registerList.filter(item => item.sts === 'C')
        this.registerListA = this.registerList.filter(item => item.sts === 'A')
      } else { // 搜索列表
        this.registerListC = this.registerList.filter(item => item.sts === 'C' && (item.patient_name.includes(this.searchText) || item.patient_id.toString().includes(this.searchText)))
        this.registerListA = this.registerList.filter(item => item.sts === 'A' && (item.patient_name.includes(this.searchText) || item.patient_id.toString().includes(this.searchText)))
      }
    },
    handleRowDblclick(row, column, event) {
      this.$emit('selectRegister', row)
    },
    setRegister(data) {
      setRegister(data).then(res => {
        this.registerList.filter(item => item.pres_id === data.pres_id)[0].sts = 'C'
      })
    },
    calcTableHeight() {
      this.$nextTick(() => {
        if (this.activeTab === 'first') {
          if (this.$refs.firstTable) {
            this.tableHeight = this.$refs.firstTable.$el.parentElement.offsetHeight
          }
        } else {
          if (this.$refs.secondTable) {
            this.tableHeight = this.$refs.secondTable.$el.parentElement.offsetHeight
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.register-container {
  border: 1px solid #ccc;
  height: 100%;
  .register-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 3rem;
  }
  .register-content {
    height: 75vh;
    overflow-y: auto;
    .register-item {
      display: flex;
      line-height: 1.5rem;
      margin: auto 0;
      font-size: 1rem;
      .seq {
        width: 4rem;
      }
      .name {
        font-weight: 400;
      }
    }
  }
}
</style>
